<%--
  Created by IntelliJ IDEA.
  User: MSH
  Date: 2019-01-02
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>零件库存</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <!--启用较验-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/zh_CN.js"></script>
    <!--sweet提示框-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/hplus/css/plugins/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>

</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">零件进货</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                    <button onclick="todel()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;删除</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <table id="usertb"></table>
                </div>
            </div>

        </div>
    </div>

    <%--添加模态框--%>
    <div class="modal inmodal" id="addmodal">
        <div class="modal-dialog">
            <form class="form-horizontal" id="userform" method="post" role="form">
                <input type="hidden" name="pn">
                <div class="modal-content animated bounceInLeft">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" >
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">零件添加</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-4 text-right">零件名称：</label>
                            <div class="col-sm-6" >
                                <select name="purchaseid" id="purchaseid" class="form-control"></select>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right">零件数量：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="count" placeholder="零件数量"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 text-right">零件进价：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="price" placeholder="零件进价"/>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="doAdd()">添加</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="toxiugaimodal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modelTitleId">修改信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="userxiugaiform"  method="post" role="form">
                        <input type="hidden" name="id">
                        <input type="hidden" name="pn">
                        <div class="modal-content animated bounceInLeft">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title"></h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label class="col-sm-4 text-right" for="name">零件名称</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="name"  placeholder="零件名称" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="count" class="col-sm-4 text-right">零件数量</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="count"  />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="price" class="col-sm-4 text-right">零件价格</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="price"  />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button onclick="doxiugai()" type="button" class="btn btn-primary">修改</button>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    $(function () {
        $("#usertb").bootstrapTable({
            url:'${pageContext.request.contextPath}/compone/comquery',
            toolbar:'#dtn',//工具按钮用哪个容器
            striped: true,//隔行换色
            showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle:true,//是否显示详细视图和列表视图的切换按钮
            //detailView:true,//是否显示父子表
            pagination:true, //是否显示分页（*）
            pageSize : 4,//单页记录数
            pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
            /* sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
             queryParams: function (params) {
             var temp = {
                 limit : params.limit,
                 offset : params.offset
             }
             return temp;
             },*/rowStyle: function (row, index) {
                var style = {};
                if (row.count<5){
                    style={css:{'color':'#ed5565'}};
                }else{
                    style={css:{'color':'#000'}};
                }
                return style;
            },
            columns:[
                {checkbox: true},
                {field: 'id', title: '编号'},
                {field: 'purchase.name', title: '名称'},
                {field: 'count', title: '数量'},
                {field: 'price', title: '售价'},
                {
                    title:'操作',
                    formatter:function(value,row,index){
                        return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"
                    }
                },
            ]
        });
    });
    //打开添加对话框
    function toadd() {
        xiala1();
        //清空文本框
        $("#addform [name='name']").val("");
        $("#addform [name='count']").val("");
        $("#addform [name='price']").val("");
        $("#addmodal").modal("show");
    }

    function xiala1() {
        var i = 0;
        //打开一个对话框
        $("#addmodal").modal("show");
        //当对话框加载完成后，绑定年有角色
        $.post('${pageContext.request.contextPath}/purchase/querypu',function(data){
            var s = "" ;
            $.each(data,function (index,item) {
                s = s + "<option value="+item.id+">"+item.name+"</option>";
                console.log(item.name);
            })
            $("select[name='purchaseid']").html(s) ;
        }) ;

    }
    $(function () {
        <!--校验框架-->
        $('#addmodal').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                supplier:{
                    message: 'The name is not valid',
                    validators:{
                        notEmpty:{//检测非空，radio也可用
                            message:'文本框必须输入'
                        },

                    }
                },
            }
        });
    });
    //进行增加用户
    function doAdd(){
        //启用校验
        $('#addmodal').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag=$('#addmodal').data("bootstrapValidator").isValid();
        if(flag){
            //绑定当前页开始
            var options=$('#usertb').bootstrapTable('getOptions');//返回表格的 Options
            //得到当前页
            var pn=options.pageNumber;
            $("input[name='pn']").val(pn);
            //序列化表单
            var formStr=$('#userform').serialize();
            //处理表单控件的中文乱码
            addcomponents=decodeURIComponent(formStr,true);
            alert(addcomponents)
            // send ajax
            $.ajax({
                'url':'/compone/addcomponents',
                'type':'post',
                'data':addcomponents,
                success:function(data){
                    //关闭对话框
                    $("#addmodal").modal('hide');
                    //重新加载表格
                    $("#usertb").bootstrapTable('load',data);
                    //提高增加成功
                    swal("提示信息","增加成功！","success");
                }
            });
        }
    };
    //删除做完
    function todel() {
        var ids = "" ;
        //1.得到要删除的行
        //返回所选的行，当没有选择任何行的时候返回一个空数组。
        var rows = $("#usertb").bootstrapTable("getSelections") ;
        if (rows.length==0){
            alert("请选择要删除的数据！") ;
        }
        else{
            $.each(rows,function (index,row) {
                ids = ids + row.id + "-" ;
            }) ;

            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                //得到当前页
                //绑定当前页开始
                var options = $("#usertb").bootstrapTable('getOptions') ;
                //得到当前页
                var pn = options.pageNumber ;
                $.post("/compone/deletecomponents",{'ids': ids,'pn':pn},function(data){
                    //友好的提示
                    swal("删除成功！", "您已经永久删除了这条信息。", "success");
                    //刷新表格
                    $("#usertb").bootstrapTable('load',data) ;
                })
            });
        }
    };
    //打开修改对话框,回传要修改行的数据
    function toxiugai(index) {
        //取消所有选择
        $("#usertb").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#usertb").bootstrapTable("check", index);

        //得到所选行的数据
        var row = $("#usertb").bootstrapTable("getSelections")[0];
        //绑定主键
        $("input[name='id']").val(row.id);
        //绑定当前页开始
        var options = $("#usertb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        //绑定当前页
        // $("input[name='pn']").val(pn) ;
        $("input[name='name']").val(row.name);
        $("input[name='count']").val(row.count);
        $("input[name='price']").val(row.price);


        //.打开对话框
        $("#toxiugaimodal").modal("show");

    }
    function doxiugai(){
        //.
        var params = $("#userxiugaiform").serialize();
        //处理表单控件的中文乱码
        params = decodeURIComponent(params,true);
        $.ajax({
            'type':'post',
            'url':'/compone/udateComponents',
            'data':params,
            success:function(data){
                //关闭对话框
                $("#toxiugaimodal").modal('hide') ;
                //友好的提示
                swal("提示信息", "修改成功!", "success");
                //重新加载表格
                $("#tb").bootstrapTable('load',data) ;

            }
        })
    }
</script>
</html>